<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API-详情页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/2-API-details.css">
</head>

<body>
    <!-- 1.头部 -->
    <header class="abs">
        <!-- logo -->
        <img src="./imgs/api-new-logo-white.png" alt="源码数据" class="logo fl mt20 ml30">
        <!-- 导航 -->
        <ul class="nav abs font14">
            <li class="active"><a href="#">首页</a></li>
            <li class="two fwb"><a href="#">API</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">案例</a></li>
            <li><a href="#">开发者</a></li>
        </ul>
        <!-- 登录和注册 -->
        <div class="right-box fr mt20 mr30 font12">
            <a href="#">登录</a><a href="#" class="register">注册有礼</a>
        </div>
    </header>
    <!-- 2.banner -->
    <div id="banner" class="pt105">
        <!-- 粒子效果 -->
        <div id="mydiv" style="height:350px;">
            <!-- 左边图片 -->
            <div class="container clearfix">
                <div class="pictureL fl ">
                    <img src="./imgs/API详情页_11.jpg" class="ml65">
                    <p class="mt50 ml52">
                        <img src="./imgs/API_smallicon_01.jpg" class="one">
                        <img src="./imgs/API_smallicon_02.jpg" class="one">
                        <img src="./imgs/API_smallicon_03.jpg">
                    </p>
                    <p class="two mt10"><span class="num-one">103</span><span
                            class="num-two">14245</span>623<span></span>
                    </p>
                </div>
                <!-- 右边内容 -->
                <div class="contentR fl font12">
                    <p class="font22 line-one">
                        <span>身份证实名验证</span>
                        <span class="font13 little-box">支持HTTPS</span>
                        <span class="font13">企业专用</span>
                    </p>
                    <p class="font14 line-two fwb">
                        <img src="./imgs/API详情页_03.jpg">限企业实名用户使用
                        <img src="./imgs/API详情页_08.jpg" class="item-two">本接口需提供应用场景审核
                        <img src="./imgs/API详情页_05.jpg" class="item-two">个人实名用户无法使用
                    </p>
                    <p class="font14 line-three">检测姓名和身份证号码是否一致,身份证验证。</p>
                    <!-- 价格 -->
                    <ul id="apiDetails" class="clearfix font12">
                        <li class="default rel">
                            <img src="./imgs/API17.jpg" alt="">
                            扫码测试
                            <!-- 二维码效果 -->
                            <div class="qrcode tcenter abs">
                                <img src="./imgs/103-demo.png" alt="">
                                <p class="c6">扫我呀!</p>
                            </div>
                        </li>
                        <!-- <li class="default-li active">4000次</li>
                    <li class="default-li">8000次</li>
                    <li class="default-li">40000次</li> -->
                    </ul>
                    <!-- 价格细节 -->
                    </p>
                    <p class="line-five font12 "><span class="cfb5b fwb font15">&yen;<span id="timesBox"></span></span>(约<span id="priceBox"></span>元/次),仅限企业实名购买</p>
                    <a href="" class="font18">立即申请</a>

                </div>
            </div>
        </div>
    </div>
    <!-- 3.API文档nav -->
    <div id="docu-nav">
        <ul class="clearfix container font16">
            <li><a href="#" class="active">API文档</a></li>
            <li><a href="#">错误码参照</a></li>
            <li><a href="#">示例代码</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <!-- 4.API文档内容 -->
    <div id="api-docu" class="container clearfix">
        <!-- 左边 -->
        <div class="docu-left fl">
            <!-- API测试工具 -->
            <div class="test-tool font13 on">
                <p><span>接口地址：</span>http://op.juhe.cn/idcard/query</p>
                <p><span>返回格式：</span>json</p>
                <p><span>请求方式：</span>http get/post</p>
                <p><span>请求示例：</span>http://op.juhe.cn/idcard/query?key=您申请的KEY&idcard=&realname=</p>
                <p><span>接口备注：</span>error_code为0时计费</p>
                <a href="">API测试工具</a>
            </div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
        <!-- 右边 -->
        <div class="docu-right fr">
            <!-- 活动推荐/Activity -->
            <p class="font16 fwb little-title c9">活动推荐/Activity</p>
            <ul class="activity">
                <li><img src="./imgs/sfz-aside1.png"></li>
                <li><img src="./imgs/details-aside02.png"></li>
                <li><img src="./imgs/details-aside03.png"></li>
            </ul>
            <!-- 猜你喜欢 -->
            <p class="font16 fwb c9 mt20">猜你喜欢</p>
           <ul class="like">
               <li class="clearfix">
                   <div class="fl picture-box">
                       <img src="./imgs/API详情页_22.jpg">
                   </div>
                   <div class="fl">
                    <p class="c5 font16 mt6">短信API服务</p>
                    <p class="c9 font12 lh36">三网合一短信通道,验证...</p>
                </div>
                </li>
                <li class="clearfix">
                    <div class="fl picture-box">
                        <img src="./imgs/API详情页_26.jpg">
                    </div>
                    <div class="fl">
                     <p class="c5 font16 mt6">银行卡四元素校验</p>
                     <p class="c9 font12 lh36">三网合一短信通道,验证...</p>
                 </div>
                 </li>
                 <li class="clearfix">
                    <div class="fl picture-box">
                        <img src="./imgs/API详情页_30.jpg">
                    </div>
                    <div class="fl">
                     <p class="c5 font16 mt6">身份证查询</p>
                     <p class="c9 font12 lh36">三网合一短信通道,验证...</p>
                 </div>
                 </li>
                 <li class="clearfix">
                    <div class="fl picture-box">
                        <img src="./imgs/API详情页_33.jpg">
                    </div>
                    <div class="fl">
                     <p class="c5 font16 mt6">身份证OCR识别</p>
                     <p class="c9 font12 lh36">三网合一短信通道,验证...</p>
                 </div>
                 </li>
                 <li class="clearfix">
                    <div class="fl picture-box">
                        <img src="./imgs/API详情页_36.jpg">
                    </div>
                    <div class="fl">
                     <p class="c5 font16 mt6">三网手机实名制认证</p>
                     <p class="c9 font12 lh36">三网合一短信通道,验证...</p>
                 </div>
                 </li> 
           </ul>

        </div>
    </div>
    <!-- 5.免费注册 -->
    <div id="experience" class="tcenter">
        <div class="font30 mb24 cff">现在注册,百款接口免费测试</div>
        <a href="#" class="font18 cff">免费注册</a>
    </div>
    <!-- 6.页脚 -->
    <footer class="clearfix">
        <div class="container">
            <!-- 左边列表 -->
            <ul class=" font12 lh28 cb3 fl">
                <li class="fl">
                    <ul>
                        <li class="one">联系与支持</li>
                        <li>400-882-7715</li>
                        <li> 售前咨询</li>
                        <li>客服&售后</li>
                        <li>常见问题</li>
                        <li>极速工单</li>
                        <li>投诉与建议</li>
                    </ul>
                </li>
                <li class="fl">
                    <ul>
                        <li class="one">关于源码</li>
                        <li>合作伙伴</li>
                        <li>服务条款</li>
                        <li>隐私政策</li>
                        <li>市场合作</li>
                        <li>反商业贿赂声明</li>
                    </ul>
                </li>
                <li class="fl">
                    <ul>
                        <li class="one">快速入口</li>
                        <li> API数据</li>
                        <li>黑钻会员</li>
                        <li>新闻动态</li>
                        <li>联系我们</li>
                        <li>加入我们</li>
                    </ul>
                </li>
                <li class="fl">
                    <ul>
                        <li class="one">产品服务</li>
                        <li>云监测</li>
                        <li>云查询</li>
                        <li>云助手</li>
                        <li>聚盒子</li>
                        <li>云充值</li>
                    </ul>
                </li>
                <li class="fl">
                    <ul>
                        <li class="one">解决方案</li>
                        <li>数字中台</li>
                        <li>慧集:</li>
                        <li>API生命周期管理</li>
                        <li>有赢:</li>
                        <li>助力企业营销</li>
                    </ul>
                </li>

            </ul>
            <!-- 右边部分 -->
            <div class="qr-code fr ">
                <p class="font15 ml32 mb12">微信公众号</p>
                <p class="font12 cb3 ml60 mb30">源码时代</p>
                <img src="./imgs/wechat-white.png">
            </div>
            <!-- 底部 -->
            <div class="clearfix foot font13">
                <div class="fl"><img src="./imgs/bei2.png"><img src="./imgs/bei1.png"
                        class="picture2">增值电信业务经营许可证：蜀B2-20180596蜀ICP备15006450号-3&emsp;营业执照
                </div>
                <div class="fr">源码大数据股份有限公司©版权所有
                </div>
            </div>
        </div>
    </footer>
    <!-- 7.返回顶部 -->
    <div id="returnTop" class="cff tcenter fwb font20">^</div>
    <!-- 引入jquery库 -->
    <script src="./js/jquery-1.11.3/jquery.min.js"></script>
    <!-- 引入粒子效果库 -->
    <script src="./js/canvas-particle.js"></script>
    <!-- 配置插件 -->
    <script src="lib/swiper/utils.js"></script>
    <script src="./js/2-API-details.js"></script>
    <script src="./js/commom.js"></script>

</body>

</html>